﻿@using Arms.Application.Modules.Products
@using Arms.Application.Modules.Products.DTOs;
@using Newtonsoft.Json
@model Arms.Presentation.Web.Models.ProductPickerModel

<script type="text/x-kendo-tmpl" id="template">
    <div class="product">
        <img src="" alt="placeholder" />
        <h3>#:ProductName#</h3>
        <p>#:kendo.toString(Price, "c")#</p>
    </div>
</script>

<script type="text/javascript">
    function Product(id, name, quantity) {
        this.ID = id;
        this.Name = name;
        this.Quantity = quantity;
    }

    var products = new Array();

    function filterMenu() {
        return { menuID: "@UserData.AppData.CurrentMenuID" };
    }
    function filterMenuCategories() {
        return { menuCategoryID: $("#MenuCategories").val() };
    }
    function filterProductClasses() {
        return { productClassID: $("#ProductClasses").val() };
    }
    function onProductAdd() {
        var productID = $("#Products").val();
        var productName = $("#Products").data("kendoComboBox").text();
        addProduct(productID, productName);
        return false;
    }
    function onQuantityAdd(e) {
        var id = parseInt($(e).closest("tr").find("td.productID").text());
        var name = $(e).closest("tr").find("td.productName").text()
        addProduct(id, name);

        return false;
    }
    function onQuantitySubtract(e) {
        var quantity = parseInt($(e).closest("tr").find("td.productQuantity").text());
        var id = parseInt($(e).closest("tr").find("td.productID").text());
        removeProduct(id, quantity);
        return false;
    }

    function addProduct(id, name) {
        var contains = false;
        for (var i = 0; i < products.length; i++) {
            if (products[i].ID == id) {
                products[i].Quantity++;
                contains = true;
                break;
            }
        }

        if (!contains) {
            products.push(new Product(id, name, 1));
        }

        renderProductList();
    }

    function removeProduct(id, quantity) {
        for (var i = 0; i < products.length; i++) {
            if (products[i].ID == id) {
                if (quantity > 1) {
                    products[i].Quantity--;
                } else {
                    products.splice(i, 1);
                }
                break;
            }
        }

        renderProductList();
    }

    function renderProductList() {
        $("#product-table").find("tr:gt(0)").remove()
        for (var i = 0; i < products.length; i++) {
            $("#product-table > tbody").append("<tr><td class='productID'>" + products[i].ID + "</td><td class='productName'>" + products[i].Name + "</td><td class='productQuantity'>" + products[i].Quantity + "</td><td><div id='quantity-add' class='btn btn-sm btn-green' onclick='return onQuantityAdd(this);'>+</div></td><td><div id='quantity-add' class='btn btn-sm btn-green' onclick='return onQuantitySubtract(this);'>-</div></td></tr>")
        }
        $("#ProductPicker_Products").val(JSON.stringify(products));
    }
    jQuery.fn.exists = function () {
        return jQuery(this).length > 0;
    };
</script>
<div class="box">
    <div class="box-header">
        <div class="title">Pick Product</div>
    </div>
    <div class="box-content padded">
        <div class="row">
            <div class="col-md-3">
                @(Html.Kendo().ComboBox()
                    .Placeholder("Select menu category...")
                    .Name("MenuCategories")
                    .HtmlAttributes(new { style = "width:100%"})
                    .DataTextField("Name")
                    .DataValueField("ID")
                    .DataSource(ds =>
                    {
                        ds.Read(r => r.Action("GetMenuCategories", "ProductPicker", new { area = "" }).Data("filterMenu"));
                    })
                )
            </div>
            <div class="col-md-3">
                @(Html.Kendo().ComboBox()
                  .Placeholder("Select product class...")
                  .Name("ProductClasses")
                  .HtmlAttributes(new { style = "width:100%"})
                  .DataTextField("Name")
                  .DataValueField("ID")
                  .CascadeFrom("MenuCategories")
                  .DataSource(ds =>
                  {
                      ds.Read(r => r.Action("GetProductClassesByMenuCategory", "ProductPicker", new { area = "" }).Data("filterMenuCategories"));
                      ds.ServerFiltering(true);
                  })
                )
            </div>
            <div class="col-md-3">
                @(Html.Kendo().ComboBox()
                  .Placeholder("Select product...")
                  .Name("Products")
                  .HtmlAttributes(new { style = "width:100%"})
                  .DataTextField("ProductName")
                  .DataValueField("ProductID")
                  .CascadeFrom("ProductClasses")
                  .DataSource(ds =>
                  {
                      ds.Read(r => r.Action("GetProductsByProductClass", "ProductPicker", new { area = "" }).Data("filterProductClasses"));
                      ds.ServerFiltering(true);
                  })
                )
            </div>
            <div class="col-md-1">
                <div id="product-add" class="btn btn-sm btn-green" onclick="return onProductAdd();">+ Add</div>
            </div>
        </div>
        <div class="row padded">
                <table id="product-table" class="table table-normal" style="width:100%">
                    <thead>
                        <tr>
                            <td>ID</td>
                            <td>Name</td>
                            <td>Quantity</td>
                            <td style="width: 40px"></td>
                            <td style="width: 40px"></td>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
        </div>
    </div>
</div>
@Html.HiddenFor(x => x.Products)
@*@(Html.Kendo().MultiSelectFor(x => x.ProductIDs)
              .DataTextField("ProductName")
              .DataValueField("ProductID")
              .AutoBind(false)
              .ItemTemplateId("template")
              .DataSource(ds =>
              {
                  ds.ServerFiltering(true);
                  ds.Read(r => r.Action("GetProductsByProductClass", "ProductPicker", new { area = "" }).Data("filterProductClasses"));
              })
)*@
@*<script>
    function onProductClassesSelected(e) {
        $("#ProductClasses").data("kendoComboBox").select(e.item.index());
        $("#ProductPicker_ProductIDs").data("kendoMultiSelect").dataSource.read();
    }
</script>
<script type="text/javascript">
    $(document).ready(function () {
        // get tab navs of menu categories
        $.getJSON("@Url.Action("GetMenuCategories", "ProductPicker", new { area = "", menuID = UserData.AppData.CurrentDiningRoomLayoutID })", function (menuCategories) {
            $.each(menuCategories, function (i, menuCategory) {
                var isActive = i == 0;
                var $nav = jQuery("<li />");
                var $content = jQuery("<div />", { class: "tab-pane", id: menuCategory.Name.killWhiteSpace() });

                if (isActive) {
                    $nav.addClass("active");
                    $content.addClass("active");
                }

                $nav.append("<a href='#" + menuCategory.Name.killWhiteSpace() + "' data-toggle='tab'><span>" + menuCategory.Name + "</span></a>");
                $content.append("<div class=\"box-header\"><ul class=\"nav nav-tabs nav-tabs-left\" id=\"content_" + menuCategory.ID + "\"></ul></div><div class=\"box-content-padded\"><div class=\"tab-content\" id=\"product-content_" + menuCategory.ID + "\"></div></div>");
                $(".menu-categories").append($nav);
                $(".menu-categories-content").append($content);

                // get tab navs of product classes that belong to the menu category
                var urlAction = "@Url.Action("GetProductClassesByMenuCategory", "ProductPicker", new { area = "", menuCategoryID = -1 })";
                urlAction = urlAction.replace("-1", menuCategory.ID);

                $.getJSON(urlAction, function (productClasses) {
                    $.each(productClasses, function (j, productClass) {
                        var isProductClassActive = j == 0;
                        var $productClassNav = jQuery("<li />");
                        var $productClassContent = jQuery("<div />", { class: "tab-pane", id: productClass.Name.killWhiteSpace() + "-content" });
                        if (isProductClassActive) {
                            $productClassNav.addClass("active");
                            $productClassContent.addClass("active");
                        }

                        $productClassNav.append("<a href='#" + productClass.Name.killWhiteSpace() + "' data-toggle='tab'><span>" + productClass.Name + "</span></a>");
                        $("#content_" + menuCategory.ID).append($productClassNav);
                        $("#product-content_" + menuCategory.ID).append($productClassContent);

                        var contentUrlAction = "@Url.Action("GetProductsByProductClass", "ProductPicker", new { area = "", productClassID = -1 })";
                        contentUrlAction = contentUrlAction.replace("-1", productClass.ID);

                        $.getJSON(contentUrlAction, function (products) {
                            var $productContent = jQuery("<div />");
                            $productContent.addClass("row");

                            $.each(products, function (k, product) {
                                $productContent.append("<button class='btn btn-lg btn-default'>" + product.ProductName + "</button>");
                            });

                            $productClassContent.append($productContent);
                        });
                    });
                });
            });
        });
    });
    String.prototype.killWhiteSpace = function() {
        return this.replace(/\s/g, '');
    };

</script>
<div class="box">
    <div class="box-header">
        <ul class="nav nav-tabs nav-tabs-left menu-categories"></ul>
        <div class="title">Menu</div>
    </div>
    <div class="box-content-padded">
        <div class="tab-content menu-categories-content"></div>
    </div>
</div>*@